import React from 'react'
import { Table,
  //  Space, Button
   } from 'antd';

// 表格待渲染的数据源
// 班级、学号、姓名、测量方式、体温、所在地、是否外出、是否有不良症状、填报时间
// const data = [
//   {
//     id: 1,
//     clazz: '二年级一班',
//     stuNo: '20200001',
//     name: '张三',
//     type: 1, // 1. 额温  2. 耳温
//     temperature: 36.2,
//     address: '成都青羊区',
//     isOut: 0, // 0. 否 1. 是
//     symptom: '无',
//     createTime: '2021-01-09 10:25:37'
//   },
// ]

// 自定义表格组件：函数组件
export default function CustomTable(props) {
  // console.log(this) // undefined
  const {dataSource, total, pageSize, page, onChange} = props
  
  // 表格中的列的定义
  const columns = [
    // {
    //   title: '序号', // 列标题
    //   dataIndex: '', // 数据项（对象）中的属性名
    //   key: '', // 标识，有 dataIndex 的不同设置，可省略
    // },
    {
      title: '班级',
      dataIndex: 'clazz',
      key: 'clazz'
    },
    {
      title: '学号',
      dataIndex: 'stuNo',
      key: 'stuNo'
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name'
    },
    {
      title: '体温是否正常',
      dataIndex: 'temperature',
      key: 'temperature',
      render: text => (
        <span>{text === 1 ? '是' : '否'}</span>
      )
    },
    {
      title: '是否返校',
      dataIndex: 'isout',
      key: 'isout',
      render: text => (
        <span>{text === 1 ? '是' : '否'}</span>
      )
    },
    {
      title: '是否接触疑似病例',
      dataIndex: 'contact',
      key: 'contact',
      render: text => (
        <span>{text === 1 ? '是' : '否'}</span>
      )
    },
    {
      title: '是否接触疑似病例',
      dataIndex: 'symptom',
      key: 'symptom',
      render: text => (
        <span>{text === 2 ? '是' : '否'}</span>
      )
    }
  ]

  return (
    <Table
      bordered
      rowKey="stuNo"
      columns={columns}
      dataSource={dataSource}
      pagination={{
        total,
        current: page,
        pageSize,
        pageSizeOptions: [5, 10, 20, 50, 100, 1000],
        showTotal: (total, range) => `总记录数：${total}，当前第${range[0]}-${range[1]}条`,
        onChange
      }}
    />
  )
}
